<template>
	<view class="yb-index-list yb-flex">
		<list @scroll="scroll">
			<slot name="pulldown"></slot>
			<header v-if="listSync.length > 0">
				<view class="header-line yb-flex" :style="{'background-color': headerBgColor}">
					<text class="header-text" :style="{color: headerFrontColor}">{{listSync[currentIndex].index}}</text>
				</view>
			</header>
			<cell v-for="(item, i) in listSync" @appear="onappear(i)" @disappear="ondisappear(i)" ref="indexItem">
				<view class="header-line yb-flex" :style="{'background-color': headerBgColor}" v-if="i != 0">
					<text class="header-text" :style="{color: headerFrontColor}">{{item.index}}</text>
				</view>
				<view v-for="(child, j) in item.child" :key="j">
					<slot :indexItem="child"></slot>
				</view>
			</cell>
		</list>
		<yb-index-shortcut
		v-if="showShortcut"
		:actived-color="shortActivedColor"
		:front-color="shortFrontColor"
		:current="currentIndex"
		:indexs="shortIndexs"
		@change="scrollTo"></yb-index-shortcut>
	</view>
</template>

<script>
	const dom = weex.requireModule('dom');
	const headerHeight = uni.upx2px(54)
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			headerBgColor: {
				type: String,
				default: '#2196F5'
			},
			headerFrontColor: {
				type: String,
				default: '#FAFAFA'
			},
			shortActivedColor: {
				type: String,
				default: '#FF3B30'
			},
			shortFrontColor: {
				type: String,
				default: '#FAFAFA'
			},
			//是否展示右边快捷跳转列表
			showShortcut: {
				type: Boolean,
				default: true
			}
		},
		data () {
			return {
				listSync: [],
				currentIndex: 0,
				direction: '',
				oldOffsetY: 0,
				shortIndexs: [],
				indexs: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']
			}
		},
		created () {
			this.init()
		},
		methods: {
			init () {
				if ( this.data.length > 0 ) {
					let list = []
					let shortIndexs = []
					this.indexs.forEach(index => {
						const arr = this.data.filter(item => item.index == index)
						if ( arr.length > 0 ) {
							list.push({
								index: index,
								child: arr
							})
							shortIndexs.push(index)
						}
					})
					this.shortIndexs = shortIndexs
					this.listSync = list
				}
			},
			scrollTo (current) {
				dom.scrollToElement(this.$refs['indexItem'][current], {animated: false, offset: current == 0 ? -headerHeight : 0});
				this.currentIndex = current
			},
			scroll (e) {
				if ( e.contentOffset.y == 0 ) {
					this.direction = '';
					this.currentIndex = 0;
				} else {
					//向上滑动时
					if ( e.contentOffset.y < this.oldOffsetY ) {
						this.direction = 'up';
					} else {
						//向下滑动时
						this.direction = 'under';
					}
				}
				this.oldOffsetY = e.contentOffset.y;
			},
			onappear (i) {
				if ( this.direction == 'under' ) {
					this.currentIndex = i;
				}
			},
			ondisappear (i) {
				if ( this.direction == 'up' ) {
					this.currentIndex = parseInt(i) + 1;
				}
			}
		},
		watch: {
			data (newVal) {
				this.init()
			}
		}
	}
</script>

<style scoped>
	.yb-index-list {
		flex: 1;
		position: relative;
	}
	.yb-index-list .header-line {
		padding: 0 40rpx;
		height: 54rpx;
		justify-content: center;
	}
	.yb-index-list .header-line .header-text {
		font-size: 28rpx;
	}
</style>
